<template>
  <div :style="{ height: height ? height : 'auto' }" class="list">
    <el-table
      :data="tableData"
      :ref="tableRef"
      :border="border"
      :size="size"
      height="100%"
      :highlight-current-row="highlight"
      :show-overflow-tooltip="showOverflowTooltip"
      @select="select"
      @select-all="selectAll"
      @sort-change="sortChange"
      @selection-change="selectionChange"
    >
      <!-- 选择框 -->
      <el-table-column
        v-if="showSelect"
        type="selection"
        width="55"
        min-width="55"
        align="center"
      ></el-table-column>
      <!-- 序号 -->
      <el-table-column
        v-if="showIndex"
        :index="indexMethod"
        type="index"
        align="center"
        width="55"
        min-width="55"
        label="序号"
      ></el-table-column>
      <!-- 每行 -->
      <el-table-column
        v-for="col in listCols"
        :show-overflow-tooltip="true"
        :key="col.prop"
        :prop="col.prop"
        :min-width="col.minwidth"
        :width="col.width"
        :label="col.label"
        :align="col.align || 'left'"
        :sortable="col.sortable || false"
      >
        <template slot-scope="{ row, column, $index }">
          <template v-if="col.slot">
            <slot
              :name="col.prop + 'Slot'"
              :row="row"
              :column="column"
              :$index="$index"
            ></slot>
          </template>
          <template v-else>{{ row[col.prop] }}</template>
        </template>
      </el-table-column>
      <!-- 操作列 -->
      <el-table-column
        v-if="actionOpts.show"
        :label="actionOpts.name"
        :align="actionOpts.align"
        :min-width="actionOpts.width"
        :fixed="actionOpts.fixed"
      >
        <template slot-scope="{ row, column, $index }">
          <el-button
            v-if="!actionOpts.hidEditBtn"
            type="primary"
            size="mini"
            @click="handleActionBtn('edit', row)"
            >编辑</el-button>
          <el-button
            v-if="!actionOpts.hidDelBtn"
            type="danger"
            size="mini"
            @click="handleActionBtn('del', row)"
            >删除</el-button>
          <!-- 查看按钮 -->
          <slot
            v-if="actionOpts.slot"
            name="actionSlot"
            :row="row"
            :column="column"
            :$index="$index"
          ></slot>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>

export default {
  name: "x-table",
  props: {
    // 表格 ref="list"
    tableRef: {
      type: String,
      default:'list'
    },
    // 表格尺寸。可选值： medium / small / mini。默认值：small
    size:{
      type:String,
      default:'small'
    },
    // 是否显示边框
    border:{
      type: Boolean,
      default: true,
    },
    // 是否显示序号
    showIndex: {
      type: Boolean,
      default: false,
    },
    // 是否显示多选框
    showSelect: {
      type: Boolean,
      default: false,
    },
    // 自定义排序：true / false / custom
    sortable: {
      type: [Boolean, String],
      default: false,
    },
    // 是否要高亮当前行
    highlight: {
      type: Boolean,
      default: false,
    },
    // 表格数据
    tableData: {
      type: Array,
      default() {
        return [];
      },
    },
    // 列数据
    listCols: {
      type: Array,
      default() {
        return [];
      },
    },
    // 默认要显示的列的prop合集
    initColsProps: {
      type: [Array, Boolean],
      default() {
        return false;
      },
    },
    // 操作栏的设置
    actionOpts: {
      type: Object,
      default() {
        return {
          show: true,
          align: "center",
          width: "120px",
          name: "操作",
        };
      },
    },
    height: {
      type: String,
      default: "",
    },
    // 第几页
    page: {
      type: Number,
      default: 0,
    },
    // 一页几行
    limit: {
      type: Number,
      default: 0,
    },
    // 当内容过长被隐藏时显示 tooltip
    showOverflowTooltip:{
      type: Boolean,
      default: true,
    }
  },
  methods: {
    // 操作按钮
    handleActionBtn(type, rowData) {
      this.$emit(`${type}Click`, JSON.parse(JSON.stringify(rowData)));
    },
    // 自定义排序
    sortChange({ column, prop, order }) {
      this.sortable === "custom" && this.$emit("sort-change", { column, prop, order });
    },
    // 多选
    selectionChange(selection) {
      this.$emit("selection-change", selection);
    },
    // 序号
    indexMethod(index) {
      return index + 1 + (this.page - 1) * this.limit;
    },
    // 多选
    select(selection, row) {
      this.$emit("select", selection, row);
    },
    // 全选
    selectAll(selection) {
      this.$emit("select-all", selection);
    },
  },
};
</script>

<style lang="scss">
.list {
  position: relative;
}
::v-deep .el-table colgroup.gutter {
  display: table-cell !important;
}
::v-deep .simple-context-menu2__item {
  color: #ccc !important;
  padding: 8px 15px;
}
::v-deep .simple-context-menu2__divider {
  padding: 0 !important;
}
::v-deep .iconfont {
  font-size: 14px !important;
}
::v-deep .icon-shaixuan {
  font-size: 20px !important;
}
</style>
